<template>
	<view :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">

		<u-navbar is-back="true" title-color="" back-icon-color="" :border-bottom="false" title="个人资料"></u-navbar>
		<view style="float: left;width: 100%;padding: 30rpx">
			<view class="container css-theme" :class="[cueTheme]">
				<view class="top_box">
					<view class="container_box">
						<view class="container_box_left">
							<view class="left_view">头像</view>

							<view class="flex-item image_v"
								style="display: flex;align-items: center;position: relative;" @click="getImage">

								<image v-if="avatar == ''" :src="avatarTemp" mode="aspectFill"
									style="margin-right: 10px;height: 40px;width: 40px;border-radius: 50%;position: absolute;right: 20px;">
								</image>
								<image v-else-if="avatar.indexOf('https')>-1" :src="avatar" mode="aspectFill"
									style="margin-right: 10px;height: 40px;width: 40px;border-radius: 50%;position: absolute;right: 20px;">
								</image>
								<image v-else :src="globalUrl+avatar" mode="aspectFill"
									style="margin-right: 10px;height: 40px;width: 40px;border-radius: 50%;position: absolute;right: 20px;">
								</image>
								<view class="tn-icon-right"></view>
							</view>
						</view>
					</view>
					<view class="container_box">
						<view class="container_box_left">
							<view class="left_view">昵称</view>
							<view class="flex-item image_v"
								style="display: flex;align-items: center;position: relative;">
								<input v-model="name"  type="text" placeholder="请填写昵称" maxlength="12"
								placeholder-class="placeholder_style" />
							</view>
							<!-- <input v-model="name"  type="text" placeholder="请填写昵称" maxlength="12"
								placeholder-class="placeholder_style" /> -->
						</view>
					</view>
					<picker mode="date" @change="onDateChange">
						<view class="container_box">
							<view class="container_box_left">
								<view class="left_view">生日</view>
								<view class="flex-item image_v"
									style="display: flex;align-items: center;position: relative;">
									<view class="flex-item" style="margin-right: 10px;">{{ selectedDate }}</view>
									<view class="tn-icon-right flex-item image_v">
									</view>
								</view>
							</view>
						</view>
					</picker>
					<picker @change="bindPickerChange" :value="indexSelectSex" :range="array" range-key="name">
						<view class="container_box">
							<view class="container_box_left">
								<view class="left_view">性别</view>
								<view class="flex-item image_v"
									style="display: flex;align-items: center;position: relative;">
									<view class="flex-item" style="margin-right: 10px;">{{ array[indexSelectSex].name }}
									</view>
									<view class="tn-icon-right flex-item image_v">
									</view>
								</view>
							</view>
						</view>
					</picker>
					<picker @change="bindPickerChangeJob" :value="indexSelectJob" :range="arrayJob" range-key="name">
						<view class="container_box">
							<view class="container_box_left">
								<view class="left_view">职业</view>
								<view class="flex-item image_v"
									style="display: flex;align-items: center;position: relative;">
									<view class="flex-item" style="margin-right: 10px;">
										{{ arrayJob[indexSelectJob].name }}
									</view>
									<view class="tn-icon-right flex-item image_v">
									</view>
								</view>
							</view>
						</view>
					</picker>

					<view class="textarea-container">
						<textarea class="textarea" maxlength="50" v-model="info" placeholder="请输入附加信息"
							placeholder-class="placeholder_style_textarea"></textarea>
					</view>

				</view>


			</view>
			<view class="container_btn">
				<button class="css-theme" :class="[cueTheme]" style="color: #F74656 !important;" @click="layout()">退出登录</button>
			</view>
			
		</view>
		<view @click="show_popup_center = true"  style="position: absolute;bottom: 10px;text-align: center;width: 100%;color:#ccc">
			注销账号
		</view>
		
		<tn-popup v-model="show_popup_center" :closeBtn="false" mode="center" width="550rpx" :borderRadius="20"
			:zIndex="10" :maskCloseable="false" :backgroundColor="pageBg">
			<view class="container css-theme" :class="[cueTheme]" :style="'background-color: '+pageBg">
				<view class="row">
					<view style="width: 100%;text-align: center;font-size: 18px;line-height: 24px;font-weight: bolder;">
						谨慎操作！</view>
					<view style="width: 100%;line-height: 24px;margin-top: 10px;color:#F74656">
						<view >注销账号将清空所有数据！</view>
						<view >注销账号所有数据无法找回！</view>
					</view>
					<view style="margin-top: 20px;">
						<checkbox style="transform:scale(0.7)" :checked="checkRedio" @click="checkThis"></checkbox>确认注销
					</view>
					<view class="category-item">
						<view class="save_btn" style="background-color: #ccc;" @click="goAgree()">同意</view>
						<view class="save_btn" style="margin-left: 30rpx;" @click="goCancel()">取消</view>
					</view>
				</view>
			</view>
		</tn-popup>
		
		<authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="WRITE_EXTERNAL_STORAGE"></authpup>
		<authpup ref="authpupCAMERA" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></authpup>

	</view>
</template>
<script>
	var _self
	import dayjs from '@/dayjs.min.js'
	export default {

		data() {
			return {
				checkRedio: false,
				show_popup_center: false,
				globalUrl: getApp().globalData.url,
				id: '',
				avatar: '',
				avatarTemp: '',
				name: '',
				selectedDate: dayjs().format('YYYY-MM-DD'),
				indexSelectSex: 0,
				indexSelectJob: 0,
				info: '',
				user: [],
				array: [{
					name: '男'
				}, {
					name: '女'
				}, ],
				type: 0,
				arrayJob: [{
					name: '学生'
				}, {
					name: '上班'
				}, {
					name: '自主创业'
				}, ],
				checkIndex:0,

			};
		},
		destroyed() {
			_self.saveData();
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						setTimeout(function() {
							_self.getUserInfo()
						}, 300);

					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
		},
		onLoad(options) {
			_self = this


		},
		methods: {
			goCancel(){
				this.show_popup_center = false
			},
			goAgree(){
				if (!_self.checkRedio) {
					uni.showToast({
						title: '请勾选确认注销',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				_self.$api.deleteUser({}, _self.user.id).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						uni.removeStorageSync('user')
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}
				})
				
			},
			checkThis() {
				if (this.checkRedio) {
					this.checkRedio = false
				} else {
					this.checkRedio = true
				}
			},
			layout() {
				uni.removeStorageSync('user')
				uni.removeStorageSync('listMainScore')
				uni.removeStorageSync('loveTime')
				uni.removeStorageSync('modeltips')
				uni.redirectTo({
					url: '/pages/login/login'
				});
			},
			getImage: function() {
				var _this = this
				
				
				uni.showActionSheet({
					itemList: ['拍照', '选择一张照片'],
					success: function(res) {
						_this.checkIndex = res.tapIndex
						
						if (uni.getSystemInfoSync().platform == 'ios') {
							_this.changeAuth()
						} else if (uni.getSystemInfoSync().platform == 'android') {
							if(res.tapIndex == 0){
								_this.$refs['authpupCAMERA'].open()
							}else{
								_this.$refs['authpup'].open()
							}
						}
						
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			chooseImage: function(index) {
				const _this = this
				
				// 如需直接开相机或直接选相册，请只使用一个选项
				const sourceType = index === 0 ? ['camera'] : ['album']
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: sourceType,
					success: function(res) {
						// TODO 真是上传照片
						// _this.setData({
						// 	imageSrc: res.tempFilePaths[0],
						// })
						// _this.loadImage();
				
						uni.navigateTo({
							url: '../me/avatarFix?imageSrc=' + res.tempFilePaths[0]
						});
					}
				});
				
			},
			//用户授权权限后的回调
			changeAuth(){
				this.chooseImage(this.checkIndex)
			},
			bindPickerChange: function(e) {
				this.indexSelectSex = e.detail.value;
			},
			bindPickerChangeJob: function(e) {
				this.indexSelectJob = e.detail.value;
			},
			saveData() {

				var data = {
					id: _self.user.id,
					name: _self.name,
					birth: _self.selectedDate,
					sex: _self.indexSelectSex,
					job: _self.indexSelectJob,
					avatar: _self.avatar,
					info: _self.info
				}
				this.$api.updateUser(data).then((res) => {

				})

			},
			onDateChange(event) {
				this.selectedDate = event.mp.detail.value;
			},

			getUserInfo() {
				_self.$api.detailUser({}, _self.user.id).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						console.log(resData.data)
						_self.name = decodeURIComponent(resData.data.name)
						console.log(_self.name)
						if (resData.data.avatar != '' && resData.data.avatar != null) {
							_self.avatar = resData.data.avatar
						} else {
							_self.avatarTemp = "../../static/bgday/1.jpg"
						}
						if (resData.data.info != '' && resData.data.info != null) {
							_self.info = resData.data.info
						}
						if (resData.data.birth != '' && resData.data.birth != null) {
							_self.selectedDate = resData.data.birth
						}
						if (resData.data.sex != '' && resData.data.sex != null) {
							_self.indexSelectSex = resData.data.sex
						}
						if (resData.data.job != '' && resData.data.job != null) {
							_self.indexSelectJob = resData.data.job
						}
					}
				})

			},

		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}


	.container {
		padding: 20rpx;
		width: 100%;
		float: left;
		border-radius: 8px;

	}

	.container_btn {

		width: 100%;
		float: left;
		margin-top: 20px;
		border-radius: 30px;
	}

	.container_btn button {
		border-radius: 30px;
	}

	.left_view {
		width: 60px;
	}

	.top_box {
		float: left;
		width: 100%;


	}

	.input-container {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.label {
		width: 100px;
		font-size: 16px;
	}


	.fixed-image {
		position: fixed;
		right: 20px;
		/* 可根据需要调整位置 */
		bottom: 20px;
		/* 可根据需要调整位置 */
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.fixed-image image {
		width: 80rpx;
		height: 80rpx;
	}


	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;
		margin: 16rpx 0rpx;
		border-radius: 8px;
		line-height: 25px;


	}

	.container_box_v {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		margin: 16rpx 0rpx;
	}

	.container_box_v_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		margin: 16rpx 0rpx;
		border-radius: 5px;
		color: white
	}

	.container_box_left {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
	}

	.container_box_left input {
		width: 100%;
		float: right;
		text-align: right;
	}

	.container_box_left image {
		width: 20px;
		height: 20px;
	}

	.container_box_left text {
		color: #f1f1f1;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.placeholder_style {
		color: #ccc;
		font-size: 14px;
		text-align: right;
	}

	.placeholder_style_textarea {
		color: #ccc;
		font-size: 14px;
	}




	.right {
		display: flex;
	}

	.button_v {
		margin-left: 10px;
		border: none;
		color: white;
		padding: 5rpx 10rpx;

	}

	.button_v_max {
		font-size: 40px;
	}

	.button_v_min {
		padding-top: 28px;
		font-size: 12px;
	}

	.image_v {
		margin-left: auto;
	}



	.textarea-container {
		display: flex;
		flex-direction: column;
	}

	.textarea {
		height: 120px;
		border: 1px solid #f1f1f1;
		border-radius: 8px;
		padding: 10px;
		font-size: 16px;
		width: 100%;
	}
	
	
	
	.category-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	
	}
	
	.save_btn {
		text-align: right;
		background-color: #18B998;
		color: white;
		width: 90px;
		border-radius: 30px;
		border:none;
		text-align: center;
		height: 36px;
		line-height: 36px;
	}
</style>